<template>
  <view class="cantainer">
      <view class="replace"></view>
      <view class="titleBox">
        <view :class="{'active':active==item.status}" v-for="(item,index) in titleList" :key="index"
          @click="change(item.status)">{{item.title}}</view>
        <!--  <view class="inTransit"> 在途 </view>
        <view class="complete"> 已完成 </view> -->
      </view>
      <!-- 待提货 -->
      <view v-if="active==1">
        <logistics-status v-for="(item,index) in list" :key="item.status" :item='item'>
          <!-- v-for="(item,index) in list" :key="item.status" :item='item' -->
          <template #btn-1>
              <view class="pickUp">
                <view class="pickTime">
                  <view class="pickTime_top">提货时间</view>
                  <view>{{item.planDepartureTime}}</view>
                </view>
                <button class="pickBtn">提货</button>
              </view>
          </template>
        </logistics-status>
      </view>
      <!-- 在途 -->
      <view v-else-if="active==2">
        <logistics-status v-for="(item,index) in list" :key="item.status" :item='item'>
          <template #btn-2>
              <view class="pickUp">
                <view class="pickTime">
                  <view class="pickTime_top">提货时间</view>
                  <view>{{item.planDepartureTime}}</view>
                </view>
                <button class="pickBtn">支付</button>
              </view>
          </template>
        </logistics-status>
      </view>
      <!-- 已完成 -->
      <view v-else="active==6">
        <logistics-status v-for="(item,index) in list" :key="item.status" :item='item'>
          <template #complete>
            <view class="bg">
              <view class="search">
                <u-search shape="round" placeholder='请输入运单号' searchIcon='/static/icon_sosuo.png' searchIconSize='16'
                  :showAction="false" bgColor="#F4F4F4"></u-search>
                <view class="select">
                </view>
              </view>
            </view>
          </template>
          <template #btn-3>
              <view class="pickUp">
                <view class="pickTime">
                  <view class="pickTime_top">提货时间</view>
                  <view>{{item.planDepartureTime}}</view>
                </view>
              </view>
          </template>
        </logistics-status>
      </view>
    </view>
</template>

<script>
  export default {
     name: '',
       components: {},
       data() {
         return {
           titleList: [ {
             title: "待提货",
             status: 1
           }, {
             title: "在途",
             status: 2
           }, {
             title: "已完成",
             status: 6
           } ],
           active: 1,
           page: 1,
           pageSize: 5,
           list: []
         };
       },
       created() {},
       mounted() {},
       onLoad() {
         this.getList()
       },
       methods: {
         change( index ) {
           this.active = index
           this.getList()
         },
         async getList() {
           console.log( this.active );
          
           let {data:{data:{items}}} = await uni.$http.get( '/tasks/list', {
             status: 2,
             page: 1,
             pageSize: 5
           } )
           this.list = items
         }
       }
  }
</script>

<style lang="scss">
 page {
    background-color: #F4F4F4;
  }

  .replace {
    width: 100%;
    height: 50px;
  }

  .titleBox {
    position: fixed;
    top: 0;
    z-index: 1111;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .active {
      position: relative;
      color: #2A2929;
      font-weight: 700;

      &::after {
        position: absolute;
        left: 50%;
        bottom: -9px;
        margin-left: -11px;
        content: '';
        width: 22px;
        height: 4px;
        background-color: #E52D21;
      }
    }

    view {
      font-size: 16px;
      color: #818181;
      margin-left: 36px;
      font-weight: 600;

      &:nth-child(1) {
        margin-left: 30px;
      }
    }

    .await {
      margin-left: 30px;
    }
  }

 

  .pickUp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-top: 14px;
    font-size: 14px;
    border-top: 1px solid #EEEEEE;

    .pickTime_top {
      color: #818181;
      margin-bottom: 3px;
    }
    .pickBtn {
      width: 80px;
      height: 32px;
      line-height: 32px;
      margin: 0;
      background: #EF4F3F;
      border-radius: 16px;
      font-size: 14px;
      color: #ffffff;
    }
  }

  .bg {
    width: 100%;
    height: 100px;
    background-color: #fff;

    .search {
      padding: 0 15px;
      margin-bottom: 22px;
    }
  }
</style>
